//MANUAL
//Faça os passo abaixo na página que se quer usar o google maps
//1. Chame os arquivos javascript do google maps e esse arquivo
//	<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
//	<script type="text/javascript" src="<?=$url;?>/js/googlemaps.js"></script>
//2.Coloque uma div com id=map_canvas onde se localizará o mapa
//	<div id="map_canvas"></div>
//3.Estilize tamanho, margin e padding para a div map_canvas conforme layout
//4.Troque a Latitudo e Longitude na varível cliente contida nesse arquivo
//5.Se tiver formulário que traça rota:
//	5.1 - Coloque no action do formulário javascript:calcRoute();
//		<form action="javascript:calcRoute();">
//	5.2 - O input no qual será digitado o local, deverá se chamar endereço
//		<input name="endereco" />
//7.Se quizer personalizar o ícone
//	7.1 - Desomente a sessão ÍCONES/personalizado
//	7.2 - Coloque o endereço da imagem na variável image da sessão de ÍCONE
//	7.3 - Comente a sessão ICONES/padrão
//

var directionsDisplay;
var cliente = new google.maps.LatLng(-30.055453,-51.188504);
var directionsService = new google.maps.DirectionsService();
var map;

//FUNÇÃO INICIAL
var mapa = {
	initialize: function() {
		directionsDisplay = new google.maps.DirectionsRenderer();
		var myOptions = {
			zoom: 16,
			center: cliente,
			disableDefaultUI: true,
			panControl: true,
			panControlOptions: {
				position: google.maps.ControlPosition.TOP_RIGHT
			},
			
			zoomControl: true,
			zoomControlOptions: {
				style: google.maps.ZoomControlStyle.SMALL						//SMALL,LARGE,DEFAUT
			},
			
			mapTypeControl: false,
			mapTypeControlOptions: {
				style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			},
			
			scaleControl: false,
			streetViewControl: true,
			overviewMapControl: false,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
		directionsDisplay.setMap(map);

		var marker = new google.maps.Marker({
			position: cliente, 
			map: map, 
			title:"Digital Cities"
		});
	}
}

//FIM DE FUNÇÃO INICIAL

//FUNÇÃO QUE TRAÇA ROTA
function calcRoute() {
	var start = $('input[name=endereco]').val();
	var end = cliente;

	var request = {
		origin:start,
		destination:end,
		travelMode: google.maps.TravelMode.DRIVING						//DRIVING,WALKING,BICYCLING
	};
	directionsService.route(request, function(result, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			 directionsDisplay.setDirections(result);
		}
	});
}

$(document).ready(function(){
	// mapa.initialize();
});